<template>
  <el-upload 
    class="avatar-uploader" 
    :action="base_url"
    name="img"
    accept="image/png, image/jpeg, image/jpg"
    :data="extraParam"
    :show-file-list="false" 
    :on-success="handleAvatarSuccess"
    :on-change="onChange"
    :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon">
      <Plus />
    </el-icon>
  </el-upload>
  
  <img style="width: 150px; height: 150px" v-show="state.compare_1vN_img['img']" :src="state.compare_1vN_img['img']" class="avatar" />
  <el-progress v-show="state.compare_1vN_img['score']" type="dashboard" :percentage="state.compare_1vN_img['score']" :color="colors" />
</template>

<script setup>
import { ref, reactive} from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const base_url = "http://10.82.14.162:8000/face/"
const extraParam={
  method:'compare_1vN'
}


const imageUrl = ref('')
const compare_1vN_img_blank = { score: '', user: '', img: '' }
const state = reactive({
  compare_1vN_img: Object.assign({}, compare_1vN_img_blank),
})

const onChange = (uploadFile)=>{
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
}

const handleAvatarSuccess = (
  response,
) => {
  console.log('compare1vN:', response)
  state.compare_1vN_img['score'] = response.score*100
  state.compare_1vN_img['user'] = response.user
  state.compare_1vN_img['img'] = response.img
}

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload .el-upload__input {
  display: none;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
